<template>
  <div>
    <!-- 标题 -->
    <van-cell title="搜索历史">
      <van-icon @click="isDel=true" v-if="!isDel" name="delete-o" />
      <template v-else>
        <span @click="historyArr.splice(0)">全部删除</span>
        <span @click="isDel=false" class="deleteSpanOk">完成</span>
      </template>
    </van-cell>
    <!-- 历史记录 -->
    <van-cell @click="clickHistory(index,item)" :title="item" v-for="(item,index) in historyArr" :key="item">
      <van-icon v-if="isDel" name="close" />
    </van-cell>
    <van-empty v-if="!historyArr.length" image="error" description="暂无搜索记录" />
  </div>
</template>

<script>
export default {
  name: 'history',
  props: {
    historyArr: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isDel: false
    }
  },
  methods: {
    clickHistory (index, item) {
      if (this.isDel) {
        this.historyArr.splice(index, 1)
      } else {
        this.$emit('search', item)
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
.deleteSpanOk {
  margin-left: 10px;
}
</style>
